<template>
  <view>
    <TableList
      :table-body-data="computedTableBodyData"
      :table-col-meta-list="tableColMetaList"
      :inset="inset"
      :list-container-type="listContainerType"
      :col-num="colNum"
      :has-grid-border="hasGridBorder"
      :container-style="containerStyle"
      :label-common-attr="labelCommonAttr"
    ></TableList>
    <BottomBtnBlock :bottom-btn-block="bottomBtnBlock"></BottomBtnBlock>
  </view>
</template>
<script setup>
import { computed } from "vue";
import TableList from "./components/table-list.vue";
import BottomBtnBlock from "./components/bottom-btn-block.vue";
const props = defineProps({
  inset: {
    type: Boolean,
    default: false,
  },
  listContainerType: {
    type: String,
  },
  colNum: {
    type: Number,
  },
  hasGridBorder: {
    type: Boolean,
  },
  tableColMetaList: {
    type: Array,
    default: () => [],
  },
  tableBodyData: {
    type: Array,
    default: () => [],
  },
  isEnabledData: {
    type: Boolean,
    default: true,
  },
  containerStyle: {
    type: Object,
  },
  labelCommonAttr: {
    type: Object,
  },
  bottomBtnBlock: {
    type: Object,
    default: () => ({}),
  },
});
const computedTableBodyData = computed(() => {
  if (props.isEnabledData) {
    return props.tableBodyData;
  } else {
    const obj = {};
    props.tableColMetaList.forEach((col) => {
      obj[col.key] = undefined;
    });
    return [obj];
  }
});
</script>
<style lang="scss" scoped></style>
